<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" >

        <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入用户账号" v-decorator.trim="[ 'username', validatorRules.username]"
                   :readOnly="!!model.id"/>
        </a-form-item>

        <template v-if="!model.id">
          <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input type="password" placeholder="请输入登录密码" v-decorator="[ 'password',validatorRules.password]"/>
          </a-form-item>

          <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码"
                     v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
          </a-form-item>
        </template>

        <a-form-item label="关联员工" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <select-person-input
            @back="selectPersonCall"
            :disabled=false
            v-decorator="[ 'empId',validatorRules.empId]"/>
        </a-form-item>
        <a-form-model-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input placeholder="请输入用户姓名" v-model="model.realname" v-decorator.trim="[ 'realname', validatorRules.realname]" disabled/>
          <a-input v-model="model.workNo" type="hidden"/>
          <a-input v-model="model.postIds" type="hidden"/>
          <a-input v-model="model.post" type="hidden"/>
        </a-form-model-item>
        <!-- <a-form-item label="用户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <j-dict-select-tag @change="changeUserType" :triggerChange="true" v-decorator="['userType',validatorRules.userType]"
                             placeholder="请选择用户类型" :type="'list'"
                             dictCode="user_type"/>
        </a-form-item> -->
<!--        <a-form-item label="企业" :labelCol="labelCol" :wrapperCol="wrapperCol" >-->
<!--          <j-search-select-tag v-decorator="['enterprise',validatorRules.enterprise]" placeholder="请选择用户类别"-->
<!--                               dict="hmhb_enterprise_info,enterprise_name,id,del_flag=0 and bpm_status=3"></j-search-select-tag>-->
<!--        </a-form-item>-->

        <a-form-model-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled" >
          <a-select
            mode="multiple"
            :disabled="departDisabled"
            style="width: 100%"
            placeholder="请选择用户角色"
            optionFilterProp="children"
            v-model="selectedRole"
            :getPopupContainer="(target) => target.parentNode">
            <a-select-option v-for="(role,roleindex) in roleList" :key="roleindex.toString()" :value="role.id">
              {{ role.roleName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!--部门分配-->
        <a-form-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
          <a-input-search
            placeholder="点击选择部门"
            v-model="checkedDepartNameString"
            readOnly
            @search="onSearch">
            <a-button slot="enterButton" icon="search" >选择</a-button>
          </a-input-search>
        </a-form-item>

        <!-- update--begin--autor:wangshuai-----date:20200108------for：新增身份和负责部门------ -->
        <a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group
            v-model="identity"
            @change="identityChange">
            <a-radio value="1">普通用户</a-radio>
            <a-radio value="2">上级</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.avatar" ></j-image-upload>
        </a-form-model-item>
        <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag  type="list" v-model="model.sex" dictCode="sex" placeholder="请选择性别" />
        </a-form-model-item>
        <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
          <a-input placeholder="请输入手机号码" :disabled="model.id&&!disableSubmit" v-model="model.phone" v-decorator="['phone',validatorRules.phone]"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
          <a-input placeholder="请输入邮箱" v-model="model.email" v-decorator="['email',validatorRules.email]"/>
        </a-form-model-item>
        <a-form-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol"  v-if="departIdShow==true">
          <a-select
            mode="multiple"
            style="width: 100%"
            placeholder="请选择负责部门"
            v-model="departIds"
            optionFilterProp = "children"
            :getPopupContainer = "(target) => target.parentNode"
            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
            
          >
            <a-select-option v-for="item in resultDepartOptions" :key="item.key" :value="item.key"
            >{{item.title}}</a-select-option
            >
          </a-select>
        </a-form-item>
        <!-- update--end--autor:wangshuai-----date:20200108------for：新增身份和负责部门------ -->
        <a-form-model-item label="企业微信账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wxUserId">
          <a-input placeholder="请输入企业微信账号" v-model="model.wxUserId" v-decorator="['wxUserId',validatorRules.wxUserId]"/>
        </a-form-model-item>
        <a-form-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag v-decorator="['activitiSync', {}]" placeholder="请选择是否同步工作流引擎" :type="'radio'"
                             :triggerChange="true" dictCode="activiti_sync"/>
        </a-form-item>

      </a-form>
    </a-spin>
    <depart-window ref="departWindow" @ok="modalFormOk"></depart-window>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import moment from 'moment'
import Vue from 'vue'
// 引入搜索部门弹出框的组件
import departWindow from './DepartWindow'
import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import {getAction} from '@/api/manage'
import {addUser, duplicateCheck, editUser, queryall, queryUserRole} from '@/api/api'
import {disabledAuthFilter} from "@/utils/authFilter"
import JImageUpload from '../../../components/jeecg/JImageUpload'
import SelectPersonInput from '@/views/scy/components/SelectPersonInput'
import {validateDuplicateValue} from "../../../utils/util";

export default {
  name: "UserModal",
  components: {
    JImageUpload,
    departWindow,
    JSelectPosition,
    SelectPersonInput
  },
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
        roleDisabled: false, //是否是角色维护调用该页面
        modalWidth: 800,
        drawerWidth: 700,
        modaltoggleFlag: true,
        confirmDirty: false,
        selectedDepartKeys: [], //保存用户选择部门id
        checkedDepartKeys: [],
        checkedDepartNames: [], // 保存部门的名称 =>title
        checkedDepartNameString: "", // 保存部门的名称 =>title
        resultDepartOptions: [],
        userId: "", //保存用户id
        disableSubmit: false,
        userDepartModel: {userId: '', departIdList: []}, // 保存SysUserDepart的用户部门中间表数据需要的对象
        dateFormat: "YYYY-MM-DD",
        validatorRules: {
          username: {
            rules: [{
              required: true, message: '请输入用户账号!'
            }, {
              validator: this.validateUsername,
            }]
          },
          personId: {
            rules: [{
              required: true, message: '请选择人员!'
            }, {
              validator: this.validatePersonId,
            }]
          },
          password: {
            rules: [{
              required: true,
              pattern: /^\d{6,}$/,
             // pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
              message: '请输入密码!'
            }, {
              validator: this.validateToNextPassword,
            }],
          },
          confirmpassword: {
            rules: [{
              required: true, message: '请重新输入登录密码!',
            }, {
              validator: this.compareToFirstPassword,
            }],
          },
          lb: {rules: [{required: true, message: '请选择用户类别!'}]},
          realname: {rules: [{required: true, message: '请输入用户名称!'}]},
           empId: {rules: [
            {required: true, message: '请选择关联员工!'},
              { validator: (rule, value, callback) => validateDuplicateValue('sys_user', 'emp_id', value, this.model.id, callback)},
            ]
          },
          selectedRole:{rules: [{required: true, message: '请选择角色!'}]},
          phone: {rules: [{required: true,validator: this.validatePhone}]},
          email: {
            rules: [{
              validator: this.validateEmail
            }],
          },
          // checkedDepartNameString:{rules: [{required: true, message: '请选择部门!'}]},
          roles: {},
          //  sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
          workNo: {
            rules: [
              {required: true, message: '请输入工号'},
              {validator: this.validateWorkNo}
            ]
          },
          telephone: {
            rules: [
              {pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码'},
            ]
          },
          wxUserId: {
            rules: [
            {required: true, message: '请输入企业微信账号'},
            ]
          }
        },
        departIdShow: false,
        departIds: [], //负责部门id
        title: "操作",
        visible: false,
        model: {},
        roleList: [],
        selectedRole: [],
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        form: this.$form.createForm(this),
        picUrl: "",
        url: {
          fileUpload: window._CONFIG['domianURL'] + "/api/erpmng/sys/common/upload",
          userWithDepart: "/api/erpmng/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
          userId: "/api/erpmng/sys/user/generateUserId", // 引入生成添加用户情况下的url
          syncUserByUserName: "/api/erpmng/act/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
          queryTenantList: '/api/erpmng/sys/tenant/queryList',
          departListByIds: "/api/erpmng/sys/sysDepart/departListByIds",
          getInfoByEmpId:"/api/erp/files/employee/erpEmployeeContactInfo/getInfoByEmpId" //获取用户信息
        },
        identity: "1",
        fileList: [],
        tenantList: [],
        currentTenant: [],
        selectedObj: [],
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"Authorization": token}
      this.initTenantList()

    },
    computed: {
      uploadAction: function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      changeUserType(val) {
        if (val != 'internal') {
          this.validatorRules.empId = {}
        } else {
          this.validatorRules.empId = { rules: [
            {required: true, message: '请选择关联员工!'},
            { validator: (rule, value, callback) => validateDuplicateValue('sys_user', 'emp_id', value, this.model.id, callback)}
          ]
          }
        }
      },
      // 选择关联员工时，将相关信息带出
      selectPersonCall(val) {
        console.log('--------------', val)
        this.selectedObj = val
        if (this.selectedObj[0].gender_dictText == '男') {
          this.$set(this.model, 'sex', '1')
        } else if (this.selectedObj[0].gender_dictText == '女') {
          this.$set(this.model, 'sex', '2')
        }
        this.$set(this.model, 'realname', this.selectedObj[0].name)
        // this.userDepartModel.departIdList=[];
        // this.checkedDepartNameString=this.selectedObj[0].departmentId_dictText;
        // let departmentId=this.selectedObj[0].departmentId;
        // this.userDepartModel.departIdList.push(departmentId);
        // this.departIds=[];
        // this.departIds.push(departmentId);
        //this.resultDepartOptions =[];
        //this.resultDepartOptions.push({key:departmentId,title:this.selectedObj[0].departmentId_dictText});
        this.$set(this.model, 'workNo', this.selectedObj[0].employeeNo);
        this.$set(this.model, 'postIds', this.selectedObj[0].mainPost);
        this.$set(this.model, 'post', this.selectedObj[0].positionLevelId);
        getAction(this.url.getInfoByEmpId, {'empId': this.selectedObj[0].id}).then(res => {
          if(res.success){
            let data=res.result;
            this.$set(this.model, 'email', data.email);
            this.$set(this.model, 'phone', data.mobile);
            this.$nextTick(() => {
              this.form.setFieldsValue(pick(this.model, 'sex', 'realname', 'email', 'phone'))
            });
          }
        })
        this.$nextTick(() => {
              this.form.setFieldsValue(pick(this.model, 'sex', 'realname', 'email', 'phone'))
            });

      },
      isDisabledAuth(code) {
        return disabledAuthFilter(code);
      },
      initTenantList() {
        getAction(this.url.queryTenantList).then(res => {
          if (res.success) {
            this.tenantList = res.result
          }
        })
      },
      //窗口最大化切换
      toggleScreen() {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth;
        } else {
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      initialRoleList() {
        queryall().then((res) => {
          if (res.success) {
            this.roleList = res.result;
          } else {
            console.log(res.message);
          }
        });
      },
      loadUserRoles(userid) {
        queryUserRole({userid: userid}).then((res) => {
          if (res.success) {
            this.selectedRole = res.result;
          } else {
            console.log(res.message);
          }
        });
      },
      refresh() {
        this.selectedDepartKeys = [];
        this.checkedDepartKeys = [];
        this.checkedDepartNames = [];
        this.checkedDepartNameString = "";
        this.userId = ""
        this.resultDepartOptions = [];
        this.departId = [];
        this.departIdShow = false;
        this.currentTenant = []
      },
      add() {
        this.picUrl = "";
        this.refresh();
        this.edit({activitiSync: '1'});
      },
      edit(record) {
        this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        let that = this;
        that.initialRoleList();
        that.checkedDepartNameString = "";
        that.form.resetFields();
        if (record.hasOwnProperty("id")) {
          that.loadUserRoles(record.id);
          setTimeout(() => {
            this.fileList = record.avatar;
          }, 5)
        }
        that.userId = record.id;
        that.visible = true;
        that.model = Object.assign({}, record);
        that.$nextTick(() => {
          that.form.setFieldsValue(pick(this.model, 'username','wxUserId' ,'projectTeam','userType','lb','sex', 'realname','empId', 'email', 'phone', 'activitiSync', 'workNo', 'telephone', 'post', 'personId'))
        });
        //身份为上级显示负责部门，否则不显示
        if (this.model.userIdentity == "2") {
          this.identity = "2";
          this.departIdShow = true;
        } else {
          this.identity = "1";
          this.departIdShow = false;
        }
        if (this.model.userType) {
          this.changeUserType(this.model.userType)
        }
        // 调用查询用户对应的部门信息的方法
        that.checkedDepartKeys = [];
        that.loadCheckedDeparts();

        //update-begin-author:taoyan date:2020710 for:多租户配置
        if (!record.relTenantIds || record.relTenantIds.length == 0) {
          this.currentTenant = []
        } else {
          this.currentTenant = record.relTenantIds.split(',').map(Number);
        }
        //update-end-author:taoyan date:2020710 for:多租户配置
      },
      //
      loadCheckedDeparts() {
        let that = this;
        if (!that.userId) {
          return
        }
        getAction(that.url.userWithDepart, {userId: that.userId}).then((res) => {
          that.checkedDepartNames = [];
          if (res.success) {
            var depart = [];
            var departId = [];
            for (let i = 0; i < res.result.length; i++) {
              that.checkedDepartNames.push(res.result[i].title);
              this.checkedDepartNameString = this.checkedDepartNames.join(",");
              that.checkedDepartKeys.push(res.result[i].key);
              //新增负责部门选择下拉框
              depart.push({
                key: res.result[i].key,
                title: res.result[i].title
              })
              departId.push(res.result[i].key)
            }
            that.resultDepartOptions = depart;
            //判断部门id是否存在，不存在择直接默认当前所在部门
            if (this.model.departIds) {
              this.departIds = this.model.departIds.split(",");
            } else {
              this.departIds = departId;
            }
            that.userDepartModel.departIdList = that.checkedDepartKeys
          } else {
            console.log(res.message);
          }
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
        this.userDepartModel = {userId: '', departIdList: []};
        this.checkedDepartNames = [];
        this.checkedDepartNameString = '';
        this.checkedDepartKeys = [];
        this.selectedDepartKeys = [];
        this.resultDepartOptions = [];
        this.departIds = [];
        this.departIdShow = false;
        this.identity = "1";
        this.fileList = [];
      },
      moment,
      handleSubmit() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            if (!values.birthday) {
              values.birthday = '';
            } else {
              values.birthday = values.birthday.format(this.dateFormat);
            }
            let formData = Object.assign(this.model, values);
            formData.avatar = this.model.avatar
            console.log(this.selectedRole);
            if(this.checkedDepartNameString.length==0){
              that.$message.warning('请分配部门');
              that.confirmLoading = false;
              return
            }
            if(this.selectedRole.length==0){
              that.$message.warning('请选择角色');
              that.confirmLoading = false;
              return
            }
            /* if (that.fileList != '') {
              formData.avatar = that.fileList;
            } else {
              formData.avatar = null;
            } */
            //update-begin-author:taoyan date:2020710 for:多租户配置
            formData.relTenantIds = this.currentTenant.length > 0 ? this.currentTenant.join(',') : ''
            //update-end-author:taoyan date:2020710 for:多租户配置
            formData.selectedroles = this.selectedRole.length > 0 ? this.selectedRole.join(",") : '';
            formData.selecteddeparts = this.userDepartModel.departIdList.length > 0 ? this.userDepartModel.departIdList.join(",") : '';
            formData.userIdentity = this.identity;
            //如果是上级择传入departIds,否则为空
            if (this.identity === "2") {
              formData.departIds = this.departIds.join(",");
            } else {
              formData.departIds = "";
            }
            // that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
            let obj;
            if (!this.model.id) {
              formData.id = this.userId;
              obj = addUser(formData);
            } else {
              console.log('formData--------',formData)
              obj = editUser(formData);
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.checkedDepartNames = [];
              that.userDepartModel.departIdList = {userId: '', departIdList: []};
              that.close();
            })

          }
        })
      },
      handleCancel() {
        this.close()
      },
      validateToNextPassword(rule, value, callback) {
        const form = this.form;
        const confirmpassword = form.getFieldValue('confirmpassword');

        if (value && confirmpassword && value !== confirmpassword) {
          callback('两次输入的密码不一样！');
        }
        if (value && this.confirmDirty) {
          form.validateFields(['confirm'], {force: true})
        }
        callback();
      },
      compareToFirstPassword(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('两次输入的密码不一样！');
        } else {
          callback()
        }
      },
      validatePhone(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^1[0-9][0-9]\d{8}$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'phone',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback("手机号已存在!")
              }
            })
          } else {
            callback("请输入正确格式的手机号码!");
          }
        }
      },
      validateEmail(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'email',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              console.log(res)
              if (res.success) {
                callback()
              } else {
                callback("邮箱已存在!")
              }
            })
          } else {
            callback("请输入正确格式的邮箱!")
          }
        }
      },
      validateUsername(rule, value, callback) {
        var params = {
          tableName: 'sys_user',
          fieldName: 'username',
          fieldVal: value,
          dataId: this.userId
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("用户名已存在!")
          }
        })
      },
      validatePersonId(rule, value, callback){
        var params = {
          tableName: 'sys_user',
          fieldName: 'person_id',
          fieldVal: value,
          dataId: this.userId
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("该人员已有账号!")
          }
        })
      },
      validateWorkNo(rule, value, callback) {
        var params = {
          tableName: 'sys_user',
          fieldName: 'work_no',
          fieldVal: value,
          dataId: this.userId
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("工号已存在!")
          }
        })
      },
      handleConfirmBlur(e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value
      },

      normFile(e) {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
          return e
        }
        return e && e.fileList
      },
      beforeUpload: function (file) {
        var fileType = file.type;
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      handleChange(info) {
        this.picUrl = "";
        if (info.file.status === 'uploading') {
          this.uploadLoading = true;
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          if (response.success) {
            this.model.avatar = response.message;
            this.picUrl = "Has no pic url yet";
          } else {
            this.$message.warning(response.message);
          }
        }
      },
      // 搜索用户对应的部门API
      onSearch() {
        this.$refs.departWindow.add(this.checkedDepartKeys, this.userId);
      },

      // 获取用户对应部门弹出框提交给返回的数据
      modalFormOk(formData) {
        this.checkedDepartNames = [];
        this.selectedDepartKeys = [];
        this.checkedDepartNameString = '';
        this.userId = formData.userId;
        this.userDepartModel.userId = formData.userId;
        this.departIds = [];
        this.resultDepartOptions = [];
        var depart = [];
        for (let i = 0; i < formData.departIdList.length; i++) {
          this.selectedDepartKeys.push(formData.departIdList[i].key);
          this.checkedDepartNames.push(formData.departIdList[i].title);
          this.checkedDepartNameString = this.checkedDepartNames.join(",");
          //新增部门选择，如果上面部门选择后不为空直接付给负责部门
          depart.push({
            key: formData.departIdList[i].key,
            title: formData.departIdList[i].title
          })
          this.departIds.push(formData.departIdList[i].key)
        }
        this.resultDepartOptions = depart;
        this.userDepartModel.departIdList = this.selectedDepartKeys;
        this.checkedDepartKeys = this.selectedDepartKeys  //更新当前的选择keys
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth;
        } else {
          this.drawerWidth = 700;
        }
      },
      identityChange(e) {
        if (e.target.value === "1") {
          this.departIdShow = false;
        } else {
          this.departIdShow = true;
        }
      }, personBack(e) {
        if (e && e[0]) {
          let personInfo = e[0];
          this.$set(this.model,'postIds',personInfo.ssgw);
          this.$set(this.model,'realname',personInfo.xm);
          this.$set(this.model,'empId',personInfo.empId);
          this.$set(this.model,'sex',personInfo.xb);
          this.$set(this.model,'birthday',personInfo.csny);
          this.$set(this.model,'phone',personInfo.lxdh);
          if (personInfo.ssbm) {
            getAction(this.url.departListByIds, {ids: personInfo.ssbm}).then(res => {
              this.checkedDepartNames = [];
              this.selectedDepartKeys = [];
              this.checkedDepartNameString = '';
              this.departIds = [];
              this.resultDepartOptions = [];
              var depart = [];
              for (let i = 0; i < res.result.length; i++) {
                this.selectedDepartKeys.push(res.result[i].key);
                this.checkedDepartNames.push(res.result[i].title);
                this.checkedDepartNameString = this.checkedDepartNames.join(",");
                //新增部门选择，如果上面部门选择后不为空直接付给负责部门
                depart.push({
                  key: res.result[i].key,
                  title: res.result[i].title
                })
                this.departIds.push(res.result[i].key)
              }
              this.resultDepartOptions = depart;
              this.userDepartModel.departIdList = this.selectedDepartKeys;
              this.checkedDepartKeys = this.selectedDepartKeys  //更新当前的选择keys
            })
          }

        }
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>